<template>
  <el-card shadow="never">
    <template #header>
      <el-form label-width="80px">
        <el-row :gutter="10">
          <el-col :span="6" :xs="24">
            <el-form-item label="展位标题">
              <el-input v-model="page.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="展位类型">
              <el-select style="width: 100%" v-model="page.type" clearable>
                <el-option v-for="item in boothType" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="状态">
              <el-select style="width: 100%" v-model="page.status" clearable>
                <el-option :value="1" label="启用"></el-option>
                <el-option :value="0" label="禁用"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="产品名称">
              <el-select style="width: 100%" v-model="page.productId" clearable filterable>
                <el-option v-for="item in productList" :key="item.productId" :label="item.productName"
                           :value="item.productId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="贷超APP"  >
              <el-select v-model="page.appId"  style="width: 100%"  clearable>
                <el-option v-for="item in loanProductList" :key="item.appId" :label="item.appName"
                           :value="item.appId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label-width="20px">
              <el-button type="primary" @click="getTableData">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
<!--    <div style="text-align: right;margin-bottom: 10px">-->
<!--      <el-button type="danger" @click="batchDelete">批量删除</el-button>-->
<!--    </div>-->
    <Table :tableColumn="tableColumn"
           :page="page"
           :tableData="tableData"
           :selectRows="boothSelectionRows"
           @handleSelectionChange="(val)=>{boothSelectionRows = val}"
           @handleCurrentChange="(val)=>{page.pageNum  = val,getTableData()}"
           @handleSizeChange="(val)=>{page.pageSize = val,getTableData()}">
      <template #title="{row}">
<!--        <el-button type="text" v-if="row.type === 0 || row.type === 1  || row.type === 2" @click="bindListShow(row)">-->
<!--          {{ row.title }}-->
<!--        </el-button>-->
        <span>{{ row.title }}</span>
      </template>
      <template #img="{row}">
        <el-image style="width: 80px;height: 80px" v-if="row.img" :src="row.img"
                  :preview-src-list="[row.img]"></el-image>
      </template>
      <template #status="{row}">
        <el-switch :model-value="row.status === 1" @change="switchChange(row)"></el-switch>
      </template>
      <template #type="{row}">
        {{ boothType.find(item => item.value === row.type).label }}
      </template>
      <template #handle="{row}">
<!--        <el-button type="text">修改</el-button>-->
<!--        <el-button type="text">删除</el-button>-->
        <el-button type="text" v-if="row.type === 0 || row.type === 2" @click="getUnboundAdvert(row)" v-permiss="['advert-search']">选择广告</el-button>
        <el-button type="text" v-if="row.type === 1" @click="getUnboundProduct(row)" v-permiss="['product-search']">选择产品</el-button>
<!--        <el-button type="text" v-show="row.type === 4">选择名称</el-button>-->
      </template>

    </Table>
    <!--    已绑定产品-->
    <Dialog v-model="bindProductVisible.isShow" :title="bindProductVisible.title"
            @cancel="bindProductVisible.isShow = false" width="55%" :footer="false">
<!--      <div style="text-align: right;margin-bottom: 10px">-->
<!--        <el-button type="primary">批量删除</el-button>-->
<!--      </div>-->
      <Table :tableColumn="bindproductColumn"
             :page="bindproductPage"
             :selectRows="bindProductVisible.selectRows"
             :selection="true"
             @handleSelectionChange="(val)=>{bindProductVisible.selectRows = val}"
             :tableData="bindProductVisible.tableData"
             @handleCurrentChange="(val)=>{bindproductPage.pageNum = val,getBindProduct()}"
             @handleSizeChange="(val)=>{bindproductPage.pageSize = val,getBindProduct()}"></Table>
    </Dialog>
    <!--    已绑定Bannar-->
    <Dialog v-model="bindBannarVisible.isShow" :title="bindBannarVisible.title"
            @cancel="bindBannarVisible.isShow = false" width="55%" :footer="false">
      <div style="text-align: right;margin-bottom: 10px">
        <el-button type="primary">批量删除</el-button>
      </div>
      <Table :tableColumn="bindBannarColumn" :page="bindBannarPage"
             :selectRows="bindBannarVisible.selectRows"
             :selection="true"
             @handleSelectionChange="(val)=>{bindBannarVisible.selectRows = val}"
             :tableData="bindBannarVisible.tableData"
             @handleCurrentChange="(val)=>{bindBannarPage.pageNum = val,getBindBannar()}"
             @handleSizeChange="(val)=>{bindBannarPage.pageSize = val,getBindBannar()}"></Table>
    </Dialog>
    <!--   未绑定产品-->
    <Dialog v-model="productVisible.isShow" :title="productVisible.title" @cancel="productVisible.isShow = false"
            @confirm="bindProductConfirm"
            @close="closeProductClear"
            width="55%">
      <el-form label-width="80px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="产品名称">
              <el-select style="width: 100%" v-model="productPage.productName" clearable>
                <el-option v-for="item in productVisible.productList" :key="item.productId" :label="item.productName"
                           :value="item.productName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属机构">
              <el-select style="width: 100%" v-model="productPage.institutionId" clearable>
                <el-option v-for="item in productVisible.institutionList" :key="item.name" :label="item.name"
                           :value="item.institutionId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="20px">
              <el-button type="primary" @click="getProduct">查询</el-button>
              <el-button @click="productResetSearch">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <Table
          ref="productRef"
          max-height="400px"
          :tableColumn="productColumn"
          :selectRows="productVisible.selectRows"
          :selection="true"
          @handleSelectionChange="(val)=>{productVisible.selectRows = val}"
          :page="false" :tableData="productVisible.tableData">
        <template #logoUrl="{row}">
          <el-image v-if="row.logoUrl" style="width: 150px;height: 150px" :src="row.logoUrl"
                    :preview-src-list="[row.logoUrl]"></el-image>
        </template>
        <template #feeStage="{row}">
          {{ row.feeStage === 1 ? 'CPA订单量' : 'CPS放款量' }}
        </template>
        <template #loanMaxLimit="{row}">
        {{row.loanMinLimit}} - {{row.loanMaxLimit}}
        </template>
      </Table>
    </Dialog>
    <!--    未绑定Bannar-->
    <Dialog v-model="bannarVisible.isShow" :title="bannarVisible.title" @cancel="bannarVisible.isShow = false"
            @confirm="bindBannarConfirm"
            @close="closeBannarClear"
            width="55%">
      <el-form label-width="80px">
        <el-row :gutter="10">
          <el-col :span="8" :xs="24">
            <el-form-item label="广告名称">
              <el-input v-model="bannarPage.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="广告类型">
              <el-select v-model="bannarPage.type" style="width: 100%" clearable>
                <el-option v-for="item in advertTypeList" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label-width="20px">
              <el-button type="primary" @click="getBannar">查询</el-button>
              <el-button @click="bannarResetSearch">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <Table
          ref="bannarRef"
          max-height="400px"
          :tableColumn="bannarColumn"
             :selectRows="bannarVisible.selectRows"
             :selection="true"
             :page="false"
             @handleSelectionChange="(val)=>{bannarVisible.selectRows = val}"
             :tableData="bannarVisible.tableData"
      >
        <template #type="{row}">
          {{ advertTypeList.find(item => item.value === row.type).label || '' }}
        </template>
        <template #activityStartTime="{row}">
          {{ row.activityStartTime }} ~ {{ row.activityEndTime }}
        </template>
        <template #img="{row}">
          <el-image style="width: 100px;height: 100px" v-if="row.img" :preview-src-list="[row.img]"
                    :src="row.img"></el-image>
        </template>
      </Table>
    </Dialog>
  </el-card>
</template>

<script>
import {reactive, ref, toRefs} from 'vue'
import useBooth from './useBooth.js'

const tableColumn = [
  {label: '贷超APP', prop: 'appName', align: 'center', minWidth: 100},
  {label: '展位图标', prop: 'img', slot: 'img', align: 'center'},
  {label: '展位标题', prop: 'title', slot: 'title', align: 'center'},
  {label: '展位类型', prop: 'type', slot: 'type', align: 'center'},
  {label: '展位描述', prop: 'describe', align: 'center'},
  {label: '状态', prop: 'status', slot: 'status', align: 'center'},
  {label: '操作', slot: 'handle', align: 'center', fixed: 'right', minWidth: 150},
]
// 已绑定产品表头
const bindproductColumn = [
  {label: '产品名称', prop: 'id', align: 'center'},
  {label: '所属机构', prop: 'icon', align: 'center'},
  {label: '产品logo', prop: 'icon', align: 'center'},
  {label: '可贷范围', prop: 'icon', align: 'center'},
  {label: '排序', prop: 'icon', align: 'center'},
  {label: '操作', prop: 'icon', align: 'center'},
]
// 已绑定Bannar表头
const bindBannarColumn = [
  {label: '广告图片', prop: 'id', align: 'center'},
  {label: '广告名称', prop: 'icon', align: 'center'},
  {label: '广告类型', prop: 'icon', align: 'center'},
  {label: '跳转页面', prop: 'icon', align: 'center'},
  {label: '排序', prop: 'icon', align: 'center'},
  {label: '起止时间', prop: 'icon', align: 'center'},
  {label: '操作', prop: 'icon', align: 'center'},
]
// 未绑定Bannar表头
const bannarColumn = [
  {label: '广告图片', prop: 'img', slot: 'img', align: 'center', minWidth: 100},
  {label: '广告名称', prop: 'name', align: 'center'},
  {label: '广告类型', prop: 'type', slot: 'type', align: 'center'},
  {label: '跳转页面', prop: 'url', align: 'center', minWidth: 150},
  {label: '起止时间', prop: 'icon', slot: 'activityStartTime', align: 'center', minWidth: 200},
]
// 未绑定产品表头
const productColumn = [
  {label: '产品名称', prop: 'productName', align: 'center'},
  {label: '所属机构', prop: 'name', align: 'center'},
  {label: '产品logo',  prop: "logoUrl", slot: 'logoUrl',align: 'center'},
  {label: '可贷范围',prop: 'loanMaxLimit', slot:'loanMaxLimit',minWidth:150,align: 'center'},
  {label: '收费方式', prop: 'feeStage',slot:'feeStage', align: 'center', minWidth: 150},
]
export default {
  name: "BoothList",
  setup() {
    const bannarRef = ref(null)
    const productRef = ref(null)
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      bindproductPage: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      bindBannarPage: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      productPage: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      bannarPage: { },
      boothSelectionRows: [],
      tableData: [],
      bindProductVisible: {
        isShow: false,
        title: '',
        tableData: [],
        selectRows: []
      },
      bindBannarVisible: {
        isShow: false,
        title: '',
        tableData: [],
        selectRows: []
      },
      productVisible: {
        isShow: false,
        title: '',
        tableData: [],
        selectRows: [],
        institutionList:[],
        productList:[]
      },
      bannarVisible: {
        isShow: false,
        title: '',
        tableData: [],
        selectRows: []
      },
      tableRows:{},
      // 展位类型
      boothType: [
        {label: 'banner', value: 0},
        {label: '产品位', value: 1},
        {label: '广告位', value: 2},
        {label: '消息播报', value: 3},
        {label: '金刚区', value: 4}
      ],
      // 广告类型
      advertTypeList: [
        {label: '图片', value: 0},
        {label: '外链', value: 1},
        {label: '机构产品', value: 2},
      ],
      productList:[],
      loanProductList:[]
    })
    return {
      ...toRefs(state),
      ...useBooth(state,{bannarRef,productRef}),
      tableColumn,
      bindproductColumn,
      bindBannarColumn,
      bannarColumn,
      productColumn,
      bannarRef,
      productRef
    }
  }
}
</script>

<style scoped>

</style>
